<template>
	<view class="add-address">
		<view class="card">
			<view class="cell flex align-center">
				<view class="label">收货人</view>
				<view class="info">
					<input v-model="queryForm.name" type="text" placeholder="请填写详细地址，例：xx小区">
				</view>
			</view>
			<view class="cell flex align-center">
				<view class="label">手机号码</view>
				<view class="info">
					<input v-model="queryForm.cellphone" type="text" placeholder="请填写详细地址，例：xx小区">
				</view>
			</view>
			<view class="cell flex align-center" @click="handChoose">
				<view class="label">所在地区</view>
				<view class="info">
					<text v-if="queryForm.provinceName">
						{{ queryForm.provinceName }}{{ queryForm.cityName }}{{ queryForm.countyName }}
					</text>
					<text v-else>请选择所在地区</text>
				</view>
				<view class="right">
					<uv-icon name="arrow-right"></uv-icon>
				</view>
			</view>
			<view class="cell flex align-center">
				<view class="label">详细地址</view>
				<view class="info">
					<input v-model="queryForm.address" type="text" placeholder="请填写详细地址，例：xx小区">
				</view>
			</view>
			<view class="cell flex align-center">
				<view>
					<view class="label">默认地址</view>
					<view class="desc">提醒：每次下单会默认推荐使用该地址</view>
				</view>
				<view class="swtich flex-sub flex justify-end">
					<uv-switch v-model="queryForm.isDefault" active-color="#05C41E"></uv-switch>
				</view>
			</view>
		</view>
		<view class="submit">
			<button @click="handSubmit">保存</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		getCurrentInstance
	} from 'vue'
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		doEdit
	} from '@/apis/address.js'
	import {
		useAppsStore
	} from '@/stores/modules/app.js'
	import qqMap from '@/utils/qqMap.js'
	const {
		proxy
	} = getCurrentInstance();
	const $back = inject('$back')
	const useStore = useAppsStore()
	const {
		doUserInfo
	} = (useStore)

	const queryForm = ref({
		provinceName: '',
		cityName: '',
		countyName: '',
		address: '',
		latitude: 34.201336,
		longitude: 117.275463,
		houseNumber: '',
		name: '',
		gender: 0,
		cellphone: '',
		isDefault: true
	})
	let loading = false
	const handSubmit = async () => {
		const params = uni.$uv.deepClone(queryForm.value)
		if (!params.name) {
			uni.$uv.toast('请输入收货人')
			return
		}
		if (!params.cellphone) {
			uni.$uv.toast('请输入手机号码')
			return
		}
		if (!params.provinceName) {
			uni.$uv.toast('请选择所在地区')
			return
		}
		if (!params.address) {
			uni.$uv.toast('请输入详细地址')
			return
		}
		if (loading) return
		loading = true
		try {
			await doEdit(params)
			doUserInfo()
			const eventChannel = proxy.getOpenerEventChannel()
			eventChannel.emit('successEvent', params);
			uni.$uv.toast(params?.id ? '编辑成功' : '添加成功')
			setTimeout(() => {
				$back()
			}, 500)
		} catch (e) {
			loading = false
		}
	}

	const handChoose = () => {
		uni.chooseLocation({
			success: async (res) => {
				const {
					result
				} = await qqMap.reverseGeocoder(res.latitude, res.longitude)
				queryForm.value.provinceName = result.address_component.province
				queryForm.value.cityName = result.address_component.city
				queryForm.value.countyName = result.address_component.district
				queryForm.value.address = res.name
			}
		});
	}

	onLoad(() => {
		const eventChannel = proxy.getOpenerEventChannel()
		eventChannel.on('editData', (data) => {
			queryForm.value = data
		})
	})
</script>

<style lang="scss" scoped>
	.add-address {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-top: 30rpx;

		.card {
			width: 702rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 0 auto 0 auto;
			box-sizing: border-box;
			padding: 24rpx 24rpx 0 24rpx;

			.cell {
				padding: 32rpx 0;
				border-bottom: 1rpx solid #EEEEEE;

				.label {
					font-size: 30rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;
					width: 120rpx;
				}

				.desc {
					margin-top: 16rpx;
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}

				.info {
					flex: 1;
					margin: 0 20rpx;

					text {
						font-size: 30rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FF9113;
					}
				}
			}
		}

		.submit {
			margin-top: 66rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding-bottom: 80rpx;

			button {
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				width: 694rpx;
				height: 88rpx;
				background: #FFC434;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				&::after {
					border: none;
				}
			}

			.del-btn {
				margin-top: 24rpx;
				color: #333333;
				background-color: rgba(255, 255, 255, 0);
				border: 1rpx solid #999999;
			}
		}
	}
</style>